<template>
<div class="container">
  <headers title="新建关注投票任务" :refresh="isRefresh" path="/publish_task"></headers>
  <nav class="bar bar-tab">
    <a class="tab-item" v-link="{path: '/chongzhi', replace: true}">
      <span class="icon icon2 chongzhi-icon"></span>
      <span class="tab-label">充值</span>
    </a>
    <a class="tab-item" v-link="{path: '/xinshoujiaocheng', replace: true}">
      <span class="icon icon2 teach-icon"></span>
      <span class="tab-label">教程</span>
    </a>
    <a class="tab-item" href="#">
      <span class="icon icon2 rule-icon"></span>
      <span class="tab-label">规则</span>
    </a>
  </nav>
  <div class="content"  id="app-vote-type">
    <div class="list-block no-margin mar-bottom-10">
      <ul>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title label">公众号</div>
            <div class="item-input input-before" :class="{'input-error':validate(taskData.publicNumber,'publicNumber')}">
              <input type="text" v-model="taskData.publicNumber" @blur="doBlur('publicNumber')" placeholder="正确的公众号有助于提高合格率">
              <div class="tip">公众号不能为空</div>
            </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title label">链接</div>
            <div class="item-input input-before" :class="{'input-error':validate(taskData.link,'link')}">
              <input type="url" v-model="taskData.link" @blur="doBlur('link')" placeholder="请输入正确完整的链接">
              <div class="tip">链接格式不正确</div>
            </div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title label">被投人</div>
            <div class="item-input input-before" :class="{'input-error':validate(taskData.votedName,'votedName')}">
              <input type="text" v-model="taskData.votedName" @blur="doBlur('votedName')" placeholder="正确的被投人">
              <div class="tip">被投人不能为空</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="list-block no-margin mar-bottom-10">
      <ul>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title label">单价</div>
            <div class="item-input input-before">
              <input type="text" v-model="taskData.unitPrice" readOnly> 
            </div>
            <div class="item-input input-after"><i class="icon-build icon-coin"></i></div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title label">数量</div>
            <div class="item-input input-before" :class="{'input-error':validate(taskData.count,'count')}">
              <input type="number" v-model="taskData.count" @keyup="calcTotalGold" @blur="doBlur('count')" />
              <div class="tip">数量不能为空，且必须为大于0的整数</div>
            </div>
            <div class="item-input input-after"> 件</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title label">置顶加价</div>
            <div class="item-input input-before">
              <select v-model="taskData.addPrice" @change="calcTotalGold">
                <option value="{{opt}}" v-for="opt in addPriceData">{{opt}}</option>
              </select>
            </div>
            <div class="item-after color-danger"><i class="icon-build icon-coin"></i>&nbsp;加急冲刺请加价</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title label">总价</div>
            <div class="item-input input-before">
              <input type="text" v-model="taskData.totalGold" readonly>
            </div>
            <div class="item-input input-after"><i class="icon-build icon-coin"></i></div>
          </div>
        </li>
      </ul>
    </div>
    <div class="list-block no-margin mar-bottom-10">
      <ul>
        <li class="align-top">
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title label">备注</div>
              <div class="item-input input-before">
                <textarea v-model="taskData.description" placeholder="请说明是否闪图，并大致描述任务流程"></textarea>
              </div>
            </div>
          </div>
        </li>
        <li class="align-top">
          <img-uploader iconupload="add-upload" @imgloaded="getImgSrc"></img-uploader>
        </li>
      </ul>
    </div>
    <div class="content-block">
      <a class="button button-big button-fill button-danger" @click="doSubmit">发布</a>
    </div>
  </div>
</div>
</template>

<script>
import $ from 'zepto'
import Headers from '../components/Headers'
import ImgUploader from '../components/ImgUploader'
import store from '../assets/js/store.min.js'

export default {
  ready () {
    $.init()
    this.findAppVoteTypes()
    for (let i = 0; i <= 100; i++) {
      this.addPriceData.push(i)
    }
    this.calcTotalGold()
  },
  data () {
    return {
      statusCode: 0,
      taskData: {
        voteTypeId: '',
        votedName: '',
        publicNumber: '',
        link: '',
        unitPrice: 0,
        bowlerGold: 0,
        addPrice: 0,
        count: '',
        totalGold: 0,
        createCustomerId: store('customerId') || 0,
        description: '',
        imgUrl: []
      },
      checkData: {
        isUpdatePublicNumber: false,
        isUpdateLink: false,
        isUpdateVotedName: false,
        isUpdateCount: false,
        isOkPublicNumber: false,
        isOkLink: false,
        isOkVotedName: false,
        isOkCount: false
      },
      voteTypes: [],
      addPriceData: [],
      submitTag: true,
      isRefresh: true
    }
  },
  methods: {
    doSubmit () {
      if (!this.submitTag) {
        return false
      }
      this.doBlur('allNode')
      if (this.checkData.isOkPublicNumber && this.checkData.isOkVotedName && this.checkData.isOkLink && this.checkData.isOkCount) {
        if (this.taskData.imgUrl.length === 0) {
          $.alert('请至少上传1张图片')
        }
        else {
          this.submitTag = false
          $.showIndicator()
          this.$http.jsonp('http://www.mayishengcai.com/VoteManager/rest/saveTask?' + $.param(this.taskData, true)).then((data) => {
            if (data.data.success) {
              $.hideIndicator()
              $.alert(data.data.message, () => {
                this.$router.replace('/publish_task')
              })
            }
            else {
              $.hideIndicator()
              $.alert(data.data.message)
              this.submitTag = true
            }
          })
        }
      }
      return true
    },
    getImgSrc (data) {
      this.taskData.imgUrl = data
    },
    findAppVoteTypes () {
      this.$http.jsonp('http://www.mayishengcai.com/VoteManager/rest/findAppVoteTypes')
      .then((data) => {
        this.$set('voteTypes', data.data)
        this.voteTypes.forEach((val, key) => {
          if (val.id === 'CFEBC119406A457BB7312412D556261F') {
            this.taskData.voteTypeId = val.id
            this.taskData.unitPrice = val.gold
            this.taskData.bowlerGold = val.bowlerGold
          }
        })
        this.calcTotalGold()
      })
    },
    calcTotalGold () {
      let count = this.taskData.count ? this.taskData.count : 0
      this.taskData.totalGold = (parseInt(this.taskData.unitPrice, 0) + parseInt(this.taskData.addPrice, 0)) * parseInt(count, 0)
    },
    validate (val, node) {
      if ((node === 'publicNumber' && this.checkData.isUpdatePublicNumber)) {
        if (!String.trim(val)) {
          this.checkData.isOkPublicNumber = false
          return true
        }
        this.checkData.isOkPublicNumber = true
        return false
      }
      else if ((node === 'votedName' && this.checkData.isUpdateVotedName)) {
        if (!String.trim(val)) {
          this.checkData.isOkVotedName = false
          return true
        }
        this.checkData.isOkVotedName = true
        return false
      }
      else if (node === 'link' && this.checkData.isUpdateLink) {
        let strRegex = '(https|http)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]'
        let re = new RegExp(strRegex)
        if (!String.trim(val)) {
          this.checkData.isOkLink = false
          return true
        }
        else if (!re.test(val)) {
          this.checkData.isOkLink = false
          return true
        }
        this.checkData.isOkLink = true
        return false
      }
      else if (node === 'count' && this.checkData.isUpdateCount) {
        let re = /^[0-9]*[1-9][0-9]*$/
        if (!String.trim(val)) {
          this.checkData.isOkCount = false
          return true
        }
        else if (!re.test(val)) {
          this.checkData.isOkCount = false
          return true
        }
        this.checkData.isOkCount = true
        return false
      }
      return false
    },
    doBlur (node) {
      if (node === 'publicNumber') {
        this.checkData.isUpdatePublicNumber = true
      }
      else if (node === 'link') {
        this.checkData.isUpdateLink = true
      }
      else if (node === 'votedName') {
        this.checkData.isUpdateVotedName = true
      }
      else if (node === 'count') {
        this.checkData.isUpdateCount = true
      }
      else if (node === 'allNode') {
        this.checkData.isUpdatePublicNumber = true
        this.checkData.isUpdateLink = true
        this.checkData.isUpdateVotedName = true
        this.checkData.isUpdateCount = true
      }
      // console.log(this.checkData)
    }
  },
  components: {
    Headers,
    ImgUploader
  }
}
</script>
<style scoped>
.add_upload{width: 20%;}
.add_upload img{width: 80%;}

.input-after{
  width:180px!important;
  text-align:right;
  color:#5f646e;
}
.list-block .item-title.label{
  width:28%;
}
.input-before input,.input-before select,.input-before textarea{
  font-size:14px!important;
}
.input-before.input-error input,.input-before.input-error select,.input-before.input-error textarea{
  border:1px #f6383a dashed;
}
.tip{
  display:none;
}
.input-before.input-error .tip{
  display:block;
  color:#f6383a;
  font-size:12px;
}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{ 
  color:#c5c5c5!important; 
}
.list-block input[type=text], .list-block input[type=password], .list-block input[type=email], .list-block input[type=tel], .list-block input[type=url], .list-block input[type=date], .list-block input[type=datetime-local], .list-block input[type=time], .list-block input[type=number], .list-block input[type=search], .list-block select{
  height:1.5rem;
}
.list-block .item-input{
  margin-top:0;
  margin-bottom:0;
}
.icon-build.icon-coin{
  display:inline-block;
  vertical-align:middle;
  background-size:100% auto;
  background-position:center;
  -webkit-font-smoothing:antialiased;
  -webkit-text-stroke-width:.2px;
  width:18px;
  height:18px;
  background-image:url(../assets/images/public/icon-coin.png);
}
</style>